<!-- 头部组件 -->
<!-- 头部组件 -->
<!-- 头部组件 -->
<template>
<div class="header">
  <router-link to="/">
    <div class="header-left">
        <div class="iconfont back-icon">&#xe646;</div>
    </div>
  </router-link>
  <div class="header-title">
    城市(县)选择
  </div>
  <div class="header-container">
    <div class="header-tab">
      <ul>
        <li class="active">境内</li>
        <li>境外·港澳台</li>
      </ul>
    </div>
  </div>
</div>

</template>

<script>
export default {
  name: 'CityHeader'
}
</script>

<style lang="stylus" scoped>
  @import '~styles/publicStyle.styl'
  .header
    height .68rem
    line-height .68rem
    border-bottom 0
    position relative
    background $bgHeader
    z-index 1
    .header-left
      left 0
      top 0
      width .8rem
      height .88rem
      line-height .88rem
      font-size .36rem
      color #fff
      text-align: center
      position absolute
      .back-icon
        text-align center
        font-size .4rem
        color white
    .header-title
      overflow hidden
      margin 0 1rem
      line-height .88rem
      white-space nowrap
      text-overflow ellipsis
      font-size .32rem
      text-align center
      color #fff
      position relative
    .header-tab
      margin-top: -10px;
      height .4rem
      line-height .4rem
      background-color #00bcd4
      padding .2rem 1rem
      color #fff
      ul
        border 1px solid #fff
        border-radius .03rem
        zoom 1
        overflow hidden
        li
          width 50%
          float left
          text-align center
          background-color #00bcd4
          font-size .28rem
          color #fff
        li.active
          background-color #fff
          color $bgHeader
</style>
